<template>
  <div
      class="showPanel flex animate__animated flex-col gap-y-[20px] transitionPanel h-full animate__fadeInRight relative"
  >
    <div class="relative h-full text-[#fff]">
      <div
          class="absolute flex flex-col gap-y-[20px] top-0 left-0 right-0 bottom-0 py-[50px] pr-[10px]"
      >
        <!--          园区能耗分析-->
        <base-card class="flex-1 overflow-hidden" title="园区能耗分析">
          <div class="flex items-center gap-[5px]">
            电能消耗百分百
            <a-progress
                :percent="90"
                class="flex"
                style="width: 80%"
                :stroke-color="{
                from: '#65A4CC',
                to: '#B1FAD8',
              }"
            ></a-progress>
          </div>
          <BaseChart :options="topOption"></BaseChart>
        </base-card>
        <!--          车辆通行分析-->
        <base-card class="flex-1 overflow-hidden" title="车辆通行分析">
          <div class="flex items-center gap-[20px]">
            <img
                src="@/assets/images/bigscreen/car.png"
                class="w-[60px] h-[60px]"
            />
            <div class="ml-[10px]">
              <div class="text-[18px]">驶入车辆总量</div>
              <div class="light_blue_text">4444</div>
            </div>
            <div>
              <div class="text-[18px]">驶入车辆总量</div>
              <div class="text-[#C5AC89]">445229</div>
            </div>
          </div>
          <base-chart :options="middleOption"></base-chart>
        </base-card>
        <!--          应急事件分类-->
        <base-card class="flex-1 overflow-hidden" title="应急事件分类">
          <base-chart
              :options="bottomOption1"
              v-if="bottomTab == 0"
          ></base-chart>
          <base-chart
              :options="bottomOption2"
              v-if="bottomTab == 1"
          ></base-chart>
          <div class="flex justify-center items-center gap-[10px]">
            <div
                class="w-[30px] h-[4px] cursor-pointer"
                @click="changeBottomTab(0)"
                :class="bottomTab == 0 ? 'bg-[#fff] ' : 'bg-[#999]'"
            ></div>
            <div
                @click="changeBottomTab(1)"
                class="w-[30px] h-[4px] cursor-pointer"
                :class="bottomTab == 1 ? 'bg-[#fff] ' : 'bg-[#999]'"
            ></div>
          </div>
        </base-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import BaseCard from "@/components/three/component/baseCard.vue";
import {ref, onMounted} from "vue";
import BaseChart from "@/components/three/component/baseChart/index.jsx";
import {getVehiclePositionLoginMds} from "@/api/threeJs/threeJsApi.js";
import Hls from "hls.js";
import {
  getGasMonitor,
  getShiftReagentConsumption,
} from "@/api/dataScreen/dataScreen.js";
import {CommonEchartLegend} from "@/utils/index.js";

const tableData = ref([]);
const topOption = ref({
  grid: {
    left: "12%",
    top: "5%",
    bottom: "15%",
    right: "8%",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: "rgba(255,255,255,0.8)",
      },
    },
    backgroundColor: "rgba(0,0,0,0.6)",
    borderWidth: "0",
    textStyle: {
      color: "#fff",
    },
  },
  xAxis: {
    data: ["年度用电量", "年度煤量"],
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255, 129, 109, 0.1)",
        width: 1,
      },
    },
    axisLabel: {
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
  },
  yAxis: [
    {
      splitNumber: 2,
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255, 129, 109, 0.1)",
          width: 1,
        },
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#111",
          width: 1,
          type: "dashed",
        },
      },
    },
  ],
  series: [
    {
      name: "hill",
      type: "pictorialBar",
      symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
      color: "#386572",
      barWidth: 40,
      label: {
        show: false,
        position: "top",
        distance: 15,
        fontWeight: "bolder",
        fontSize: 20,
      },
      itemStyle: {
        emphasis: {
          opacity: 1,
        },
      },
      data: [50, 100],
      z: 10,
    },
  ],
});
const middleOption = ref({
  grid: {
    left: "12%",
    top: "15%",
    bottom: "15%",
    right: "8%",
  },
  legend: {
    ...CommonEchartLegend,
    right: 10,
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,0.6)",
    borderWidth: "0",
    textStyle: {
      color: "#fff",
    },
  },
  xAxis: {
    data: [1, 2, 3, 4, 5],
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255, 129, 109, 0.1)",
        width: 1,
      },
    },
    axisLabel: {
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
  },
  yAxis: [
    {
      type: "value",
      splitNumber: 2,
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255, 129, 109, 0.1)",
          width: 1,
        },
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      areaStyle: {},
      splitLine: {
        show: true,
        lineStyle: {
          color: "#111",
          width: 1,
          type: "dashed",
        },
      },
    },
  ],
  series: [
    {
      name: "入园总数",
      type: "line",
      color: "#85DCF8",
      barWidth: 40,
      smooth: true,
      label: {
        show: false,
        position: "top",
        distance: 15,
        fontWeight: "bolder",
        fontSize: 20,
      },
      areaStyle: {
        color: "rgba(133,220,248,0.5)",
      },
      itemStyle: {
        emphasis: {
          opacity: 1,
        },
      },
      data: [40, 90, 80, 94, 150],
      z: 10,
    },
    {
      name: "出园总数",
      type: "line",
      smooth: true,
      color: "#EEB680",
      barWidth: 40,
      areaStyle: {
        color: "rgba(238,182,128,0.5)",
      },
      label: {
        show: false,
        position: "top",
        distance: 15,
        fontWeight: "bolder",
        fontSize: 20,
      },
      itemStyle: {
        emphasis: {
          opacity: 1,
        },
      },
      data: [30, 80, 60, 74, 100],
      z: 10,
    },
  ],
});
let dataMap = {
  生产安全: {
    value: 10,
    percent: "25%",
  },
  公共卫生: {
    value: 10,
    percent: "25%",
  },
  自然灾害: {
    value: 10,
    percent: "25%",
  },
  事故灾害: {
    value: 10,
    percent: "25%",
  },
};
let ser_data1 = [
  {
    value: 10,
    name: "一般事件",
    itemStyle: {
      color: "#a0ffeb",
    },
  },
  {
    value: 10,
    name: "较大事件",
    itemStyle: {
      color: "#798bd7",
    },
  },
  {
    value: 10,
    name: "重大事件",
    itemStyle: {
      color: "#6387f5",
    },
  },
  {
    value: 10,
    name: "特大事件",
    itemStyle: {
      color: "#d8e38e",
    },
  },
];
let dataMap1 = {
  一般事件: {
    value: 10,
    percent: "25%",
  },
  较大事件: {
    value: 10,
    percent: "25%",
  },
  重大事件: {
    value: 10,
    percent: "25%",
  },
  特大事件: {
    value: 10,
    percent: "25%",
  },
};
let ser_data = [
  {
    value: 10,
    name: "生产安全",
    itemStyle: {
      color: "#a0ffeb",
    },
  },
  {
    value: 10,
    name: "公共卫生",
    itemStyle: {
      color: "#798bd7",
    },
  },
  {
    value: 10,
    name: "自然灾害",
    itemStyle: {
      color: "#6387f5",
    },
  },
  {
    value: 10,
    name: "事故灾害",
    itemStyle: {
      color: "#d8e38e",
    },
  },
];
const changeBottomTab = (tab) => {
  bottomTab.value = tab;
};
const bottomOption1 = ref({
  backgroundColor: "rgba(0,0,0,0)",
  title: [
    {
      text: "生产安全",
      top: "40%",
      left: "25%",
      padding: [0, 0, 0, -20],
      textStyle: {
        color: "#3FAA90",
        fontSize: 14,
        fontWeight: "bold",
      },
    },
    {
      text: "应急事件类型",
      top: "50%",
      left: "22%",
      padding: [0, 0, 0, -15],
      textStyle: {
        color: "#50a8e3",
        fontSize: 12,
        fontWeight: "400",
      },
    },
  ],
  tooltip: {
    show: false,
    trigger: "item",
  },
  legend: {
    ...CommonEchartLegend,
    orient: "vertical",
    right: "5%",
    top: "middle",
    formatter: (name) => {
      return `${name}  ${dataMap[name].value}`;
    },
  },
  series: [
    {
      type: "pie",
      radius: ["45%", "65%"],
      center: ["28%", "50%"],
      label: {
        show: false,
      },
      data: ser_data,
    },
  ],
});
const bottomOption2 = ref({
  backgroundColor: "rgba(0,0,0,0)",
  title: [
    {
      text: "一般事件",
      top: "40%",
      left: "25%",
      padding: [0, 0, 0, -20],
      textStyle: {
        color: "#3FAA90",
        fontSize: 14,
        fontWeight: "bold",
      },
    },
    {
      text: "应急事件类型",
      top: "50%",
      left: "22%",
      padding: [0, 0, 0, -15],
      textStyle: {
        color: "#50a8e3",
        fontSize: 12,
        fontWeight: "400",
      },
    },
  ],
  tooltip: {
    show: false,
    trigger: "item",
  },
  legend: {
    ...CommonEchartLegend,
    orient: "vertical",
    right: "5%",
    top: "middle",
    formatter: (name) => {
      return `${name}  ${dataMap1[name].value}`;
    },
  },
  series: [
    {
      type: "pie",
      radius: ["45%", "65%"],
      center: ["28%", "50%"],
      label: {
        show: false,
      },
      data: ser_data1,
    },
  ],
});
const bottomTab = ref(0);
const videoIndex = ref(0);
onMounted(() => {
});
</script>
<style scoped lang="less">
.transitionPanel {
  transition: right 0.7s ease-in-out,
  width 1s ease-in-out,
  opacity 0.7s ease-in-out;
}

.showPanel {
  opacity: 1;
  right: 0;
  //width: 100%;
}

.hidePanel {
  opacity: 0;
  //width: 0%;
  right: -120%;
}

.opt {
  transition: right 0.7s ease-in-out,
  left 0.7s ease-in-out;
}

.optToLeft {
  right: 0px;
}

.optToRight {
  right: 360px;
}

:deep(.ant-progress-text) {
  color: #fff;
  font-size: 12px;
}
</style>
